<!DOCTYPE html>
<html lang="en">
    <head>
        <title>NATS</title>
        <meta charset="utf-8">
        <!-- Bootstrap -->
        <link rel="stylesheet" href="css/bootstrap.min.css" media="screen">
        <link rel="stylesheet" href="css/common.css">  
        <link rel="stylesheet" href="css/manager.css">
        <link rel="stylesheet" type="text/css" href="css/bootstrap-wysihtml5.css"></link>
    </head>
    <body>
        <!--header-->
        <header>
            <span class="logo">NATS</span>
            <span class="user"><i class="icon-user"></i><a href="center.html">Zhang San</a><i class="icon-off"></i></span>
        </header>
        <!--container-->
        <div id="container" class="container-fluid">
            <div class="row">
                <!--lefter-->
                <div id="article" class="span">
                    <div id="title">
                        <ul class="breadcrumb"><!--
                            <li><a href="index.html">所有课程</a> <span class="divider">/</span></li>
                            <li class="active">C++程序语言设计
                                <div class="progress progress-success progress-striped">
                                    <div class="bar" style="width: 60%;"></div>
                                </div>
                            </li>-->
                        </ul>
                    </div>
                    <div id="wrap">
                        <!--课程安排-->
                        <div class="span4 well leftSchema">
                            <ul class="nav nav-list">
                                <li class="nav-header">
                                    <span class="col1">课次</span><span class="col2">标题</span>
                                </li><!--
                                <li class=" nav-line">
                                    <a href="#">
                                        <span class="col1">1</span>
                                        <span class="col2">开课，课程介绍</span>
                                        <span class="op">
                                            <span class="editbtn"><i class="icon-edit icon-white"></i></span>
                                            <span class="delbtn"><i class="icon-remove icon-white"></i></span>
                                        </span>
                                    </a>
                                </li>
                                <li class="active nav-line">
                                    <a href="#">
                                        <span class="col1">2</span>
                                        <span class="col2">开课，课程介绍</span>
                                        <span class="op">
                                            <span class="editbtn"><i class="icon-edit icon-white"></i></span>
                                            <span class="delbtn"><i class="icon-remove icon-white"></i></span>
                                        </span>
                                    </a>
                                </li>
                                <li class="nav-line">
                                    <a href="#">
                                        <span class="col1">1</span>
                                        <span class="col2">开课，课程介绍</span>
                                        <span class="op">
                                            <span class="editbtn"><i class="icon-edit icon-white"></i></span>
                                            <span class="delbtn"><i class="icon-remove icon-white"></i></span>
                                        </span>
                                    </a>
                                </li>
                                <li class="nav-line">
                                    <a href="#">
                                        <span class="col1">1</span>
                                        <span class="col2">开课，课程介绍</span>
                                        <span class="op">
                                            <span class="editbtn"><i class="icon-edit icon-white"></i></span>
                                            <span class="delbtn"><i class="icon-remove icon-white"></i></span>
                                        </span>
                                    </a>
                                </li>
                                <li class="nav-line">
                                    <a href="#">
                                        <span class="col1">1</span>
                                        <span class="col2">开课，课程介绍</span>
                                        <span class="op">
                                            <span class="editbtn"><i class="icon-edit icon-white"></i></span>
                                            <span class="delbtn"><i class="icon-remove icon-white"></i></span>
                                        </span>
                                    </a>
                                </li>
                                <li class="nav-line">
                                    <a href="#">
                                        <span class="col1">1</span>
                                        <span class="col2">开课，课程介绍</span>
                                        <span class="op">
                                            <span class="editbtn"><i class="icon-edit icon-white"></i></span>
                                            <span class="delbtn"><i class="icon-remove icon-white"></i></span>
                                        </span>
                                    </a>
                                </li>
                                <li class="nav-line">
                                  <a href="#">
                                        <span class="col1">1</span>
                                        <span class="col2">开课，课程介绍</span>
                                        <span class="op">
                                            <span class="editbtn"><i class="icon-edit icon-white"></i></span>
                                            <span class="delbtn"><i class="icon-remove icon-white"></i></span>
                                        </span>
                                    </a>
                                </li>-->
                            </ul>  
                        </div>
                        <!--中间内容-->
                        <div class="span9 centerContent">
                            <ul class="nav nav-tabs">
                                <li class="active"><a href="#haveClass" data-toggle="tab"><strong>上课</strong></a></li>
                                <li><a href="#callRoll" data-toggle="tab"><strong>点名</strong></a></li>
                            </ul>
                            <div class="tab-content span9 accordion" >
                                <div class="tab-pane active" id="haveClass">
                                    <div class="accordion-group">
                                        <div class="accordion-heading">
                                            <a href="#words" class="accordion-toggle" data-toggle="collapse" data-target="#words" data-parent="#haveClass">课前公告
                                            <button class="btn btn-primary" data-toggle="modal" data-target="#editor">编辑</button></a>
                                        </div>
                                        <div id="words" class="collapse">
                                            <div class="accordion-inner">
                                                <!--载入数据-->
                                            </div>
                                        </div>
                                    </div>
                                    <div class="accordion-group">
                                        <div class="accordion-heading">
                                            <a href="#datas" class="accordion-toggle" data-toggle="collapse" data-target="#datas" data-parent="#haveClass">上课资料
                                                <button class="btn btn-primary">上传</button></a>
                                        </div>
                                        <div id="datas" class="collapse">
                                            <div class="accordion-inner">这里是上课资料</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane" id="callRoll">
                                    <div class="accordion-group">
                                        <div class="accordion-heading">
                                            <a href="#thisCallRoll" class="accordion-toggle" data-toggle="collapse" data-target="#thisCallRoll" data-parent="#callRoll">本次课考勤</a>
                                        </div>
                                        <div id="thisCallRoll" class="collapse in">
                                            <div class="accordion-inner">
                                                <form class="form-inline">
                                                    <label for="chooseClass">选择班级：</label>
                                                    <select name="chooseClass" id="chooseClass">
                                                        <option value="0">请选择</option>
                                                        <option value="1">一大班</option>
                                                        <option value="2">二大班</option>
                                                    </select>
                                                </form>
                                                <div id="showtable" style="display: none">
                                                    <input type="text" class="span3">
                                                    <i class="icon-search" style="margin-left: -25px; margin-top: -2px;"></i>
                                                    <table class="table table-striped table-bordered table-condensed">
                                                        <thead>
                                                            <tr style="background-  color: #EEEEEE">
                                                              <th>姓名</th>
                                                              <th>学号</th>
                                                              <th>班级</th>
                                                              <th>性别</th>
                                                              <th>本次情况</th>
                                                              <th>详细记录</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody><!--
                                                            <tr style="display:">
                                                                <td>张三</td>
                                                                <td>2009303354</td>
                                                                <td>RJ010901</td>
                                                                <td>男</td>
                                                                <td>到</td>
                                                                <td><a data-toggle="modal" href="#detailModal">查看</a></td>
                                                            </tr>
                                                            <tr class="success">
                                                                <td>李四</td>
                                                                <td>2009303354</td>
                                                                <td>RJ010901</td>
                                                                <td>男</td>
                                                                <td>到</td>
                                                                <td><a data-toggle="modal" href="#detailModal">查看</a></td>
                                                            </tr>
                                                            <tr>
                                                                <td>王麻</td>
                                                                <td>2009303354</td>
                                                                <td>RJ010901</td>
                                                                <td>男</td>
                                                                <td>到</td>
                                                                <td><a data-toggle="modal" href="#detailModal">查看</a></td>
                                                            </tr>-->
                                                        </tbody>
                                                    </table>
                                                    <div class="well span8" style="margin-left: 0">
                                                    <!--此处为点名操作区-->
                                                        <div class="span2.5" style="text-align: center;margin-left: 0">
                                                            <input class="btn btn-primary span2" type="button" value="开始点名" style="margin-bottom: 80px;">
                                                            <p class="name" style="font-size: 2em;font-weight: bold;">李四</p>
                                                            <div class="btn-group" data-toggle="buttons-radio"  style="margin-bottom: 100px;">
                                                                <button class="btn" value="1">请假</button>
                                                                <button class="btn" value="2">迟到</button>
                                                                <button class="btn" value="3">未到</button>
                                                            </div>
                                                            <div>
                                                                <input class="btn btn-primary" type="button" value="上一个">
                                                                <input class="btn btn-primary" type="button" value="下一个">
                                                            </div>
                                                        </div>
                                                        <!--此处为头像播放区-->
                                                        <div class="span3">
                                                            <div id="myCarousel" class="carousel">
                                                                <!-- 头像 -->
                                                                <div class="carousel-inner">
                                                                    <div class="active item"><img src="img/pic/1.jpg"> </div>
                                                                    <div class="item"><img src="img/pic/2.jpg"></div>
                                                                    <div class="item"><img src="img/pic/3.jpg"></div>
                                                                </div>
                                                                <!-- 导航 -->
                                                                <a class="carousel-control left" hr#myCarousel" data-slide="prev">&lsaquo;</a>
                                                                <a class="carousel-control right" hr#myCarousel" data-slide="next">&rsaquo;</a>
                                                            </div>
                                                        </div>
                                                        <!--此处为点名结果统计区-->
                                                        <div id="record-data" class="span2.5">
                                                            <form>
                                                                <fieldset>
                                                                    <legend>本次课当前统计记录</legend>
                                                                    <ul>
                                                                        <li>应到：<span>126人</span></li>
                                                                        <li>实到：<span>122人</span></li>
                                                                        <li>请假：<span>3人</span></li>
                                                                        <li>无故缺勤：<span>1人</span></li>
                                                                    </ul>            
                                                                </fieldset>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="accordion-group">
                                        <div class="accordion-heading">
                                            <a href="#thisRecord" class="accordion-toggle" data-toggle="collapse" data-target="#thisRecord" data-parent="#callRoll">本次课考勤记录</a>
                                        </div>
                                        <div id="thisRecord" class="collapse">
                                            <div class="accordion-inner">
                                                <table class="table table-striped table-bordered table-condensed">
                                                    <thead>
                                                        <tr style="background-color: #EEEEEE">
                                                          <th>姓名</th>
                                                          <th>学号</th>
                                                          <th>班级</th>
                                                          <th>性别</th>
                                                          <th>本次情况</th>
                                                          <th>修改记录</th>
                                                          <th>总记录</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody><!--
                                                        <tr>
                                                            <td>张三</td>
                                                            <td>2009303354</td>
                                                            <td>RJ010901</td>
                                                            <td>男</td>
                                                            <td>准时到课</td>
                                                            <td><a data-toggle="modal" href="#modifyModal">修改</a></td>
                                                            <td><a data-toggle="modal" href="#detailModal">查看</a></td>
                                                        </tr>
                                                        <tr>
                                                            <td>张三</td>
                                                            <td>2009303354</td>
                                                            <td>RJ010901</td>
                                                            <td>男</td>
                                                            <td>准时到课</td>
                                                            <td><a data-toggle="modal" href="#modifyModal">修改</a></td>
                                                            <td><a data-toggle="modal" href="#detailModal">查看</a></td>
                                                        </tr>
                                                        <tr>
                                                            <td>张三</td>
                                                            <td>2009303354</td>
                                                            <td>RJ010901</td>
                                                            <td>男</td>
                                                            <td>准时到课</td>
                                                            <td><a data-toggle="modal" href="#modifyModal">修改</a></td>
                                                            <td><a data-toggle="modal" href="#detailModal">查看</a></td>
                                                        </tr>
                                                        <tr>
                                                            <td>张三</td>
                                                            <td>2009303354</td>
                                                            <td>RJ010901</td>
                                                            <td>男</td>
                                                            <td>准时到课</td>
                                                            <td><a data-toggle="modal" href="#modifyModal">修改</a></td>
                                                            <td><a data-toggle="modal" href="#detailModal">查看</a></td>
                                                        </tr>
                                                        <tr>
                                                            <td>张三</td>
                                                            <td>2009303354</td>
                                                            <td>RJ010901</td>
                                                            <td>男</td>
                                                            <td>准时到课</td>
                                                            <td><a data-toggle="modal" href="#modifyModal">修改</a></td>
                                                            <td><a data-toggle="modal" href="#detailModal">查看</a></td>
                                                        </tr>
                                                        <tr>
                                                            <td>张三</td>
                                                            <td>2009303354</td>
                                                            <td>RJ010901</td>
                                                            <td>男</td>
                                                            <td>准时到课</td>
                                                            <td><a data-toggle="modal" href="#modifyModal">修改</a></td>
                                                            <td><a data-toggle="modal" href="#detailModal">查看</a></td>
                                                        </tr>
                                                        <tr>
                                                            <td>张三</td>
                                                            <td>2009303354</td>
                                                            <td>RJ010901</td>
                                                            <td>男</td>
                                                            <td>准时到课</td>
                                                            <td><a data-toggle="modal" href="#modifyModal">修改</a></td>
                                                            <td><a data-toggle="modal" href="#detailModal">查看</a></td>
                                                        </tr>
                                                        <tr>
                                                            <td>张三</td>
                                                            <td>2009303354</td>
                                                            <td>RJ010901</td>
                                                            <td>男</td>
                                                            <td>准时到课</td>
                                                            <td><a data-toggle="modal" href="#modifyModal">修改</a></td>
                                                            <td><a data-toggle="modal" href="#detailModal">查看</a></td>
                                                        </tr>
                                                        <tr>
                                                            <td>张三</td>
                                                            <td>2009303354</td>
                                                            <td>RJ010901</td>
                                                            <td>男</td>
                                                            <td>准时到课</td>
                                                            <td><a data-toggle="modal" href="#modifyModal">修改</a></td>
                                                            <td><a data-toggle="modal" href="#detailModal">查看</a></td>
                                                        </tr>-->
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="accordion-group">
                                        <div class="accordion-heading">
                                            <a href="#totalRecord" class="accordion-toggle" data-toggle="collapse" data-target="#totalRecord" data-parent="#callRoll">总考勤记录</a>
                                        </div>
                                        <div id="totalRecord" class="collapse">
                                            <div class="accordion-inner">
                                                <table class="table table-striped table-bordered table-condensed">
                                                    <thead>
                                                        <tr style="background-color: #EEEEEE">
                                                            <th>序号</th>
                                                            <th>姓名</th>
                                                            <th>学号</th>
                                                            <th>班级</th>
                                                            <th>性别</th>
                                                            <th>总缺勤</th>
                                                            <th>请假</th>
                                                            <th>迟到</th>
                                                            <th>无故缺勤</th>
                                                            <th>操作</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody><!--
                                                        <tr>
                                                            <td>1</td>
                                                            <td>张三</td>
                                                            <td>2009303354</td>
                                                            <td>RJ010901</td>
                                                            <td>男</td>
                                                            <td>6</td>
                                                            <td>3</td>
                                                            <td>2</td>
                                                            <td>1</td>
                                                            <td><a data-toggle="modal" href="#detailModal">详细</a></td>
                                                        </tr>
                                                       <tr>
                                                            <td>1</td>
                                                            <td>张三</td>
                                                            <td>2009303354</td>
                                                            <td>RJ010901</td>
                                                            <td>男</td>
                                                            <td>6</td>
                                                            <td>3</td>
                                                            <td>2</td>
                                                            <td>1</td>
                                                            <td><a data-toggle="modal" href="#detailModal">详细</a></td>
                                                        </tr>
                                                        <tr>
                                                            <td>1</td>
                                                            <td>张三</td>
                                                            <td>2009303354</td>
                                                            <td>RJ010901</td>
                                                            <td>男</td>
                                                            <td>6</td>
                                                            <td>3</td>
                                                            <td>2</td>
                                                            <td>1</td>
                                                            <td><a data-toggle="modal" href="#detailModal">详细</a></td>
                                                        </tr>
                                                        <tr>
                                                            <td>1</td>
                                                            <td>张三</td>
                                                            <td>2009303354</td>
                                                            <td>RJ010901</td>
                                                            <td>男</td>
                                                            <td>6</td>
                                                            <td>3</td>
                                                            <td>2</td>
                                                            <td>1</td>
                                                            <td><a data-toggle="modal" href="#detailModal">详细</a></td>
                                                        </tr>
                                                        <tr>
                                                            <td>1</td>
                                                            <td>张三</td>
                                                            <td>2009303354</td>
                                                            <td>RJ010901</td>
                                                            <td>男</td>
                                                            <td>6</td>
                                                            <td>3</td>
                                                            <td>2</td>
                                                            <td>1</td>
                                                            <td><a data-toggle="modal" href="#detailModal">详细</a></td>
                                                        </tr>
                                                        <tr>
                                                            <td>1</td>
                                                            <td>张三</td>
                                                            <td>2009303354</td>
                                                            <td>RJ010901</td>
                                                            <td>男</td>
                                                            <td>6</td>
                                                            <td>3</td>
                                                            <td>2</td>
                                                            <td>1</td>
                                                            <td><a data-toggle="modal" href="#detailModal">详细</a></td>
                                                        </tr>
                                                        <tr>
                                                            <td>1</td>
                                                            <td>张三</td>
                                                            <td>2009303354</td>
                                                            <td>RJ010901</td>
                                                            <td>男</td>
                                                            <td>6</td>
                                                            <td>3</td>
                                                            <td>2</td>
                                                            <td>1</td>
                                                            <td><a data-toggle="modal" href="#detailModal">详细</a></td>
                                                        </tr>
                                                        <tr>
                                                            <td>1</td>
                                                            <td>张三</td>
                                                            <td>2009303354</td>
                                                            <td>RJ010901</td>
                                                            <td>男</td>
                                                            <td>6</td>
                                                            <td>3</td>
                                                            <td>2</td>
                                                            <td>1</td>
                                                            <td><a data-toggle="modal" href="#detailModal">详细</a></td>
                                                        </tr>
                                                        <tr>
                                                            <td>1</td>
                                                            <td>张三</td>
                                                            <td>2009303354</td>
                                                            <td>RJ010901</td>
                                                            <td>男</td>
                                                            <td>6</td>
                                                            <td>3</td>
                                                            <td>2</td>
                                                            <td>1</td>
                                                            <td><a data-toggle="modal" href="#detailModal">详细</a></td>
                                                        </tr>
                                                        <tr>
                                                            <td>1</td>
                                                            <td>张三</td>
                                                            <td>2009303354</td>
                                                            <td>RJ010901</td>
                                                            <td>男</td>
                                                            <td>6</td>
                                                            <td>3</td>
                                                            <td>2</td>
                                                            <td>1</td>
                                                            <td><a data-toggle="modal" href="#detailModal">详细</a></td>
                                                        </tr>
                                                        -->
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--righter-->
                <div id="aside" class="span open">
                    <div id="slidebtn"><span>&gt;</span></div>
                    <div id="slidecontent">
                        <!--数据载入-->
                    </div>
                </div>
            </div>
        </div>

        <!--editer 编辑课前公告-->
        <div id="editor" class="modal fade" style="display: none;">
            <div class="modal-header">
                <a class="close" data-dismiss="modal">×</a>
                <h3>编辑课前公告</h3>
            </div>
            <div class="modal-body">
                <textarea class="textarea" placeholder="Enter text ..." ></textarea>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn" data-dismiss="modal">取消</a>
                <a href="#" class="btn btn-primary">发布</a>
            </div>
        </div>
        <!--modifyModal 修改考勤记录编辑框-->
        <div id="modifyModal" class="modal fade" style="display:none;">
            <div class="modal-header">
                <a class="close" data-dismiss="modal">×</a>
                <h3>修改考勤记录</h3>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="control-group">
                        <label class="control-label" for="modify-name">姓名：</label>
                        <div class="controls">
                            <span id="modify-name">张三</span>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="modify-num">学号：</label>
                        <div class="controls">
                            <span id="modify-num">2009303333</span>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="modify-record">本次考勤情况：</label>
                        <div class="controls">
                            <select id="modify-record">
                                <option value="1">准时到课</option>
                                <option value="2">迟到</option>
                                <option value="3">请假</option>
                                <option value="4">无故缺勤</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn" data-dismiss="modal">取消</a>
                <a href="#" class="btn btn-primary">确定</a>
            </div>
        </div>
        <!--detailModal 详细考勤记录框-->
        <div id="detailModal" class="modal fade" style="display:none;">
            <div class="modal-header">
                <a class="close" data-dismiss="modal">×</a>
                <h3>详细考勤记录</h3>
            </div>
            <div class="modal-body">
                <form class="form-inline">
                    <label class="detail-name">姓名：<strong>张三</strong></label>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <label class="detail-name">学号：<strong>2009303333</strong></label><br>
                    <label class="detail-name">准时到课：<strong>14次</strong></label>&nbsp;
                    <label class="detail-name">迟到：<strong>4次</strong></label>&nbsp;
                    <label class="detail-name">请假：<strong>3次</strong></label>&nbsp;
                    <label class="detail-name">无故缺勤：<strong>2次</strong></label>
                </form>
                <table class="table">
                    <thead>
                        <tr style="background-color: #EEEEEE">
                            <th>课次</th>
                            <th>日期</th>
                            <th>考勤记录</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr  class="success">
                            <td>1</td>
                            <td>2009-9-12</td>
                            <td>准时到课</td>
                        </tr>
                        <tr class="success">
                            <td>2</td>
                            <td>2009-9-14</td>
                            <td>准时到课</td>
                        </tr>
                        <tr class="error">
                            <td>3</td>
                            <td>2009-9-20</td>
                            <td>无故缺勤</td>
                        </tr>
                        <tr class="success">
                            <td>4</td>
                            <td>2009-9-22</td>
                            <td>准时到课</td>
                        </tr>
                        <tr class="success">
                            <td>5</td>
                            <td>2009-9-26</td>
                            <td>准时到课</td>
                        </tr>
                        <tr class="warning">
                            <td>6</td>
                            <td>2009-9-28</td>
                            <td>迟到</td>
                        </tr>
                        <tr class="info">
                            <td>7</td>
                            <td>2009-10-2</td>
                            <td>请假</td>
                        </tr>
                        <tr class="success">
                            <td>8</td>
                            <td>2009-10-4</td>
                            <td>准时到课</td>
                        </tr>
                        <tr class="success">
                            <td>9</td>
                            <td>2009-10-10</td>
                            <td>准时到课</td>
                        </tr>
                        <tr class="warning">
                            <td>10</td>
                            <td>2009-10-12</td>
                            <td>迟到</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn" data-dismiss="modal">关闭</a>
            </div>
        </div>

    <script src="js/jquery-latest.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/wysihtml5-0.3.0.min.js"></script>
    <script src="js/bootstrap-wysihtml5.js"></script>
    <script src="js/base.js"></script>
    <script src="js/manager.js"></script>
    <script type="text/javascript">
        $('.textarea').wysihtml5();
    </script>
    </body>
</html>